import React from 'react';
import { WeaInputLocale, WeaDraggable, WeaSlideModal } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { Menu, Anchor, BackTop, Spin, Row, Col, Button } from 'antd';

const SubMenu = Menu.SubMenu;
const getCurrentLabel = WeaInputLocale.getCurrentLabel;

export default class ApiSlideModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: '',
      groups: this.props.groups,
      groupId: this.props.groupId,
      visible: false,
    };
  }
  componentWillMount() {
    this.interval = setInterval(
      () => { this.setState({ groups: this.props.groups, groupId: this.props.groupId }); }, 1000);
  }
  render() {
    const { visible } = this.state;
    return (<div >
      <ul>
        {this.getDraggableContainer()}
      </ul>
    </div>);
  }

    getDraggableContainer = () => {
      const { groups, groupId } = this.state;
      const { scrollToAnchor } = this.props;
      const menuItem = [];
      groups.map((group) => {
        if (group.groupId == groupId) {
          if (group.item.length > 0) {
            group.item.map((ite) => {
              menuItem.push(
                <div>
                  <li className="api_slider_item">
                    <a href="javascript:;" onClick={() => scrollToAnchor(ite.itemId)}>
                      {getCurrentLabel(ite.itemName)}
                      {typeof (ite.number) !== 'undefined' && <div className="badge margin-l-0-3x">{ite.number}</div>}
                    </a>
                  </li>
                  {/* <hr></hr> */}
                </div>,
              );
            });
          }
        }
      });
      return menuItem;
    }
    componentWillUnmount() {
      // 清除定时器
      clearInterval(this.interval);
    }
}
